<template>
	<view>
		<view class="notice">
			<uv-notice-bar :text="text" color="red" bgColor="pink" fontSize="16"></uv-notice-bar>
		</view>
		<view style="padding-bottom: 100rpx; padding-top: 60rpx"><u-parse style="font-size: 0" @imgtap="ignore" :html="shopDetail.details"></u-parse></view>
		<view class="btn_box">
			<button class="btn" @click="agreeBuyNow">立即支付&nbsp;{{ shopDetail.unit_price }}元/年</button>
		</view>
		<u-popup v-model="showFlag" mode="bottom" :round="60" @close="showFlag = false" @open="showFlag = true">
			<view class="close">
				<u-icon name="close" color="#fff" size="36"></u-icon>
				<view style="color: #222; font-size: 30rpx; font-weight: bold">确认订单</view>
				<u-icon name="close" color="#222" size="36" @click="showFlag = false"></u-icon>
			</view>
			<view style="color: #222; padding: 30rpx; margin-top: 80rpx; z-index: 200; background-color: #fff">
				<view class="list" style="margin-top: 20rpx">
					<view class="list_l">订单流水号</view>
					<view>{{ goodsDetail.serial_code }}</view>
				</view>
				<view class="list">
					<view class="list_l">创建时间</view>
					<view>{{ $u.timeFormat(goodsDetail.created, 'yyyy-mm-dd hh:MM:ss') }}</view>
				</view>
				<view class="list">
					<view class="list_l">订单状态</view>
					<view>{{ stateDesc }}</view>
				</view>
				<view class="list" style="align-items: flex-start">
					<view class="list_l">
						<image style="width: 140rpx; height: 140rpx" :src="goodsList.image" mode=""></image>
					</view>
					<view style="width: calc(100% - 160rpx)">
						<view class="list_img">
							<view class="">{{ goodsList.name }}</view>
							<view class="">￥{{ goodsList.unit_price }}</view>
						</view>
						<view class="list_img">
							<view class=""></view>
							<view class="">×1</view>
						</view>
					</view>
				</view>
				<view class="list">
					<view class="list_l">订单金额</view>
					<view style="text-align: right; width: calc(100% - 160rpx)">￥{{ goodsDetail.total_amount }}</view>
				</view>
			</view>
			<view class="popupBox">
				<button class="popupBtn">支付</button>
			</view>
		</u-popup>
		<wx-share :title="shop.name" :desc="shop.store_introduction" :imgUrl="shop.cover" link="/" ref="wxs"></wx-share>
		<custom-tabbar></custom-tabbar>
		<view class="service_btn" @click="service">
			<image class="service_btn_img" src="https://mafu.oss-cn-shenzhen.aliyuncs.com/shop-user/202509/oss-09e668eb12eba3997619d848a815d9a6.png" mode=""></image>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			shopDetail: {},
			goodsDetail: {},
			goodsList: {},
			user: {},
			showFlag: false,
			goodsId: 14382,
			shop: {},
			text: `“多路片”17周年携手“白猫严选”隆重推出白猫严选会员卡，399成为会员送大礼包，礼包数量有限，立即抢购吧！`
		};
	},
	computed: {},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	onReachBottom() {},
	onLoad() {
		this.getItem();
		this.getUserInfo();
	},
	mounted() {},
	onShow() {
		this.getShop();
		this.enableSticky = true;
	},
	onHide() {
		this.enableSticky = false;
	},
	methods: {
		getShop() {
			this.$u
				.post('/shopping/shop-setting', {})
				.then((res) => {
					console.log('首页商品id', res.user_agreement_id);
					this.goodsId = res.user_agreement_id;
					this.shop = res;
					console.log('this.shop', this.shop);
				})
				.catch((e) => {});
		},
		getItem() {
			// 14388 14390
			let data = { id: this.goodsId };
			this.loading = true;
			this.$u
				.post('/item/detail', data)
				.then((res) => {
					this.shopDetail = res;
					this.loading = false;
				})
				.catch((e) => {});
		},
		// 立即购买
		agreeBuyNow() {
			let data = {
				item_id: this.shopDetail.id,
				quantity: 1
			};
			this.$u.post('/shopping/buy-now', data).then((res) => {
				if (res.id) {
					this.openPage('/pages/ucp/order-detail', { id: res.id });
				}
			});
			// this.$u
			// 	.post('/shopping/buy-now', data)
			// 	.then((res) => {
			// 		this.goodsDetail = res;
			// 		this.goodsList = res.goods_list[0];
			// 		this.confirmAddr();
			// 		this.showFlag = true;
			// 	})
		},
		ignore(event) {
			event.ignore();
		},
		confirmAddr() {
			this.$u
				.post('/payment/confirm-order-addr', {
					payment_id: this.goodsDetail.id,
					delivery_type: this.goodsDetail.delivery_type,
					addr_province: this.user.address.province,
					addr_city: this.user.address.city,
					addr_district: this.user.address.district,
					addr_street: this.user.address.street,
					addr_name: this.user.address.name,
					addr_phone: this.user.address.phone
				})
				.then((res) => {
					this.getPayment();
				})
				.catch((e) => {});
		},
		getUserInfo() {
			this.$u
				.post('/user/info', {})
				.then((res) => {
					this.user = res;
				})
				.catch((e) => {
					console.log(e);
				});
		},
		openPage(jumpURL, params = {}) {
			this.$u.route({
				type: 'to',
				params: params,
				url: jumpURL,
				animationType: 'slide-in-bottom'
			});
		},
		// 客服
		service() {
			location.href = 'https://work.weixin.qq.com/kfid/kfc6d3aceb85522e2b7';
		}
	},
	computed: {
		stateDesc() {
			if (this.goodsDetail.state === 'pending_pay') {
				return '待支付';
			}
			if (this.goodsDetail.state === 'processing') {
				return '处理中';
			}
			if (this.goodsDetail.state === 'paid') {
				if (this.goodsDetail.delivery_state === 'complete') {
					return '订单已完成';
				}
				if (this.goodsDetail.delivery_state === 'store_handling') {
					return '商家捡货中';
				}
				if (this.goodsDetail.delivery_state === 'pending_receive') {
					return '商家配送中';
				}
				if (this.goodsDetail.delivery_state === 'pending_pickup') {
					return '待自提';
				}
				return '订单已支付';
			}
			if (this.goodsDetail.state === 'pending_refund') {
				return '订单退款处理中';
			}
			if (this.goodsDetail.state === 'refunded') {
				return '订单已退款';
			}
			if (this.goodsDetail.state === 'expired') {
				return '订单已失效';
			}
		}
	}
};
</script>

<style scoped>
.popupBox {
	padding: 0 24rpx 60rpx;
}
.popupBtn {
	background-color: #1e60d4;
	color: #fff;
	border-radius: 50rpx;
}
.list_img {
	display: flex;
	justify-content: space-between;
	margin-bottom: 28rpx;
}
.list {
	display: flex;
	align-items: center;
	margin-bottom: 28rpx;
	line-height: 1;
}
.list_l {
	width: 160rpx;
	font-weight: bold;
}
.close {
	position: fixed;
	top: 0rpx;
	right: 0rpx;
	width: 100%;
	padding: 30rpx;
	font-size: 28rpx;
	border-radius: 24rpx 24rpx 0 0;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1rpx solid #ccc;
}
::v-deep .u-drawer-content {
	border-radius: 24rpx 24rpx 0 0;
}
::v-depp .uv-notice-bar {
	border-radius: 50rpx !important;
	height: 60rpx !important;
}
.popupclass {
	height: 200rpx;
	padding: 20rpx;
	box-sizing: border-box;
	overflow: scroll;
	background-color: #fff;
	border-radius: 20rpx;
}
.notice {
	width: 100%;
	position: fixed;
	top: 0;
}
.btn_box {
	position: fixed;
	bottom: 140rpx;
	width: 100%;
	padding: 0 20rpx;
}
.btn {
	border-radius: 500rpx;
	background: #ff4544;
	color: #fff;
	white-space: nowrap; /* 不换行 */
	overflow: hidden; /* 隐藏溢出部分 */
	text-overflow: ellipsis; /* 显示省略号 */
	width: 100%;
}
.service_btn {
	position: fixed;
	right: 0;
	bottom: 300rpx;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
}
.service_btn_img {
	width: 160rpx;
	height: 160rpx;
}
</style>
